<template>
    <div>
        <el-button type="primary" style="margin-bottom: 10px;" size="medium" @click="handleAddVisible">新增</el-button>
        <el-table :data="categoryData" border :header-cell-style="headerStyleEvent">
            <el-table-column prop="categoryName" label="所属种类" align="center"></el-table-column>
            <el-table-column prop="categoryDesc" label="描述说明" align="center"></el-table-column>
            <el-table-column prop="thresholdManageType" label="阈值管理方式" align="center">
                <template slot-scope="scope">
                    {{ getThresholdManageTypeLabel(scope.row.thresholdManageType) }}
                </template>
            </el-table-column>
            <el-table-column prop="thresholdManageValue" label="使用阈值" align="center"></el-table-column>
            <el-table-column prop="maxManageValue" label="使用最大值" align="center"></el-table-column>
            <el-table-column prop="totalUsedQtyValue_forScrap" label="总使用报废值" align="center"></el-table-column>
            <el-table-column label="操作" align="center" width="140px">
                <template slot-scope="scope">
                    <div v-if="$store.state.theme.useCustomTheme === ''">
                        <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
                    </div>
                    <div v-else>
                        <el-button size="mini" style="color: #409eff;" @click="handleEdit(scope.row)">编辑</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="isEdit ? '编辑物品种类' : '新增物品种类'" :visible.sync="dialogVisible" width="50%">
            <el-form ref="form" :model="formmodel" label-width="139px" :rules="rules">
                <el-form-item label="物品种类名称" prop="categoryName">
                    <el-input v-model="formmodel.categoryName"></el-input>
                </el-form-item>
                <el-form-item label="物品种类描述" prop="categoryDesc">
                    <el-input v-model="formmodel.categoryDesc"></el-input>
                </el-form-item>
                <el-form-item label="阈值管理方式" prop="thresholdManageType">
                    <commonSelect v-model="formmodel.thresholdManageType" style="width: 100%;" :list="categoryList"
                        :placeholder="'请选择阈值方式'">
                    </commonSelect>
                    <el-tag type="warning" style="white-space:break-spaces;height:auto;line-height:1.5em;">
                        ["无"表示不进行使用阈值的管理；"时间"表示使用小时数]
                    </el-tag>
                </el-form-item>
                <el-form-item label="使用阈值" prop="thresholdManageValue">
                    <el-input v-model="formmodel.thresholdManageValue" ></el-input>
                </el-form-item>
                <el-form-item label="使用最大值" prop="maxManageValue">
                    <el-input v-model="formmodel.maxManageValue" ></el-input>
                </el-form-item>
                <el-form-item label="总使用量的报废值" prop="totalUsedQtyValue_forScrap">
                    <el-input v-model="formmodel.totalUsedQtyValue_forScrap" ></el-input>
                    <el-tag type="warning" style="white-space:break-spaces;height:auto;line-height:1.5em;">
                        [总使用次数/时间，超过该值应该报废处理]
                    </el-tag>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="isEdit ? handleUpdateCategory() : handleAddCategory()">确
                    定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { setMaterielCTCategory, fetchGoodCategorySelect, fetchGoodAddCategory, fetchGoodUpdateCategory } from '@/network/MaterialCategoryType'
import commonSelect from '@/components/commonSelect.vue';
export default {
    name: '',
    props: {},
    components: { commonSelect },
    data() {
        return {
            dialogVisible: false,
            isEdit: false,
            categoryData: [],
            formmodel: {
                categoryName: '',
                categoryDesc: '',
                thresholdManageType: 0,
                thresholdManageValue: '',
                maxManageValue: '',
                totalUsedQtyValue_forScrap: '',
            },
            categoryList: [
                {
                    id: 0,
                    name: '无'
                }, {
                    id: 1,
                    name: '次数'
                }, {
                    id: 2,
                    name: '时间'
                },
                {
                    id: 3,
                    name: '%'
                }
            ],
            rules: {
                categoryName: [{ required: true, message: '请输入种类名', trigger: 'blur' }],
                categoryDesc: [{ message: '请输入种类说明', trigger: 'blur' }],
                thresholdManageType: [{ required: true, message: '请选择阈值方式', trigger: 'change' }],
                thresholdManageValue: [{ required: true, message: '请输入阈值', trigger: 'blur' },
                    { pattern:/^(0|[1-9]\d*)(\.\d+)?$/, message: '请输入正确的值', trigger: 'blur' }],
                maxManageValue: [{ required: true, message: '请输入最大值', trigger: 'blur' },
                    { pattern:/^(0|[1-9]\d*)(\.\d+)?$/, message: '请输入正确的值', trigger: 'blur' }],
                totalUsedQtyValue_forScrap: [
                    { pattern:/^(0|[1-9]\d*)(\.\d+)?$/, message: '请输入正确的值', trigger: 'blur' }
                ],
            }
        }
    },
    mounted() {
        setMaterielCTCategory(this.$route.meta.materielCTCategory)
        this.getCategoryData()
    },
    methods: {
        headerStyleEvent() {
            if (this.$store.state.theme.useCustomTheme === "7-gpx") {
                return { background: '#f5f5f5', color: '#2F4F4F' };
            } else {
                return { background: '#eef1f6', color: '#606266' }
            }
        },
        async getCategoryData() {
            try {
                const res = await fetchGoodCategorySelect()
                console.log(res);

                this.categoryData = res.data
            } catch (error) {
                console.log(error);
            }
        },
        getThresholdManageTypeLabel(type) {
            const labels = {
                0: '无',
                1: '次数',
                2: '时间',
                3: '%'
            };
            return labels[type] || '';
        },
        handleAddVisible() {
            this.dialogVisible = true
            this.isEdit = false
            this.formmodel = {
                categoryName: '',
                categoryDesc: '',
                thresholdManageType: '',
                thresholdManageValue: '',
                maxManageValue: '',
                totalUsedQtyValue_forScrap: '',
            }
        },
        // validateNohold() {
        //     const value = this.formmodel.thresholdManageValue;
        //     if (!/^(0|[1-9]\d*)$/.test(value)) {
        //         this.formmodel.thresholdManageValue = '';
        //     }
        // },
        // validateNoMax() {
        //     const value = this.formmodel.maxManageValue;
        //     if (!/^(0|[1-9]\d*)$/.test(value)) {
        //         this.formmodel.maxManageValue = '';
        //     }
        // },
        async handleAddCategory() {
            this.$refs['form'].validate(async (valid) => {
                if (valid) {
                    try {
                        const res = await fetchGoodAddCategory(this.formmodel)
                        if (res.status == 200) {
                            this.$message({
                                message: '新增成功',
                                type: 'success'
                            });
                            this.dialogVisible = false
                            this.getCategoryData()
                            this.$refs['form'].resetFields();
                        }
                    } catch (error) {
                        console.log(error);
                    }
                } else {
                    console.log('提交失败');
                    return false;
                }
            });
        },
        handleEdit(row) {
            this.isEdit = true
            this.dialogVisible = true
            this.formmodel = { ...row }
        },
        async handleUpdateCategory() {
            this.$refs['form'].validate(async (valid) => {
                if (valid) {
                    try {
                        const res = await fetchGoodUpdateCategory(this.formmodel)
                        if (res.status == 200) {
                            this.$message({
                                message: '编辑成功',
                                type: 'success'
                            });
                            this.dialogVisible = false
                            this.getCategoryData()
                            this.$refs['form'].resetFields();
                        }
                    } catch (error) {
                        console.log(error);
                    }
                } else {
                    console.log('提交失败');
                    return false;
                }
            });
        },
    }
}
</script>
<style>
div.el-form-item__content {
    line-height: normal;
}
</style>